/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
*/

@import url("tools/typography.css");

.form-container {
  block-size: 100%;
  display: grid;
  grid-template-rows: 1fr min-content;
  max-block-size: calc(76vh - 80px);
  min-block-size: 0;
  min-inline-size: 0;
}

.modal-title {
  @mixin font-heading-3;

  color: var(--color-gray100);
  margin-block: 0 var(--spacing-24);
}

.padding-scroll {
  max-block-size: 70vh;
}

.text {
  @mixin font-paragraph;

  color: var(--color-gray80);
  margin-block: 0;

  &.first {
    margin-block-end: var(--spacing-20);
  }

  &::ng-deep .strong {
    color: var(--color-gray90);
    font-weight: var(--font-weight-medium);
  }
}

.add-wrapper {
  display: flex;
  gap: var(--spacing-16);
  margin-block-start: var(--spacing-16);

  & .add-icon {
    color: var(--color-gray50);
    margin-block-start: var(--spacing-4);
  }

  & .text-area {
    flex-grow: 1;
    position: relative;
  }

  & .emails-count {
    @mixin font-small;

    color: var(--color-gray90);
    inset-block-end: var(--spacing-8);
    inset-inline-end: var(--spacing-12);
    position: absolute;

    &.errors {
      inset-block-end: var(--spacing-40);
    }
  }

  & .add-btn {
    min-inline-size: 100px;
  }
}

.tip-wrapper {
  border-block-start: 1px solid var(--color-gray30);
  display: flex;
  gap: var(--spacing-8);
  justify-content: center;
  margin-block-start: var(--spacing-16);
  padding-block: var(--spacing-32);

  & .tip-icon {
    block-size: var(--spacing-24);
    inline-size: var(--spacing-24);
  }

  & .tip {
    @mixin font-paragraph;

    color: var(--color-gray50);
    font-style: italic;
  }
}

.user-list {
  border-block-start: 1px solid var(--color-gray30);
  margin-block-start: var(--spacing-16);
  padding-block-end: var(--spacing-16);
}

.user-title {
  @mixin font-inline;

  color: var(--color-gray90);
  font-weight: var(--font-weight-medium);
}

.notification {
  inline-size: 100%;

  &::ng-deep .wrapper {
    display: block;
  }
}

.actions-wrapper {
  border-block-start: 1px solid var(--color-gray30);
  padding-block-start: var(--spacing-16);

  & .notification {
    margin-block-end: var(--spacing-16);
  }
}

.form-actions {
  display: flex;
  gap: var(--spacing-36);
  justify-content: flex-end;
}

tui-data-list {
  border: none;

  & .suggested-btn {
    justify-content: flex-start;

    &:focus-visible {
      /* stylelint-disable-next-line declaration-no-important */
      background-color: var(--color-gray20) !important;
      /* stylelint-disable-next-line declaration-no-important */
      border-color: transparent !important;
    }

    &[disabled]:hover {
      /* stylelint-disable-next-line declaration-no-important */
      background-color: transparent !important;
      /* stylelint-disable-next-line declaration-no-important */
      cursor: not-allowed !important;
    }
  }

  &::ng-deep .t-empty {
    @mixin font-paragraph;

    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-gray80) !important;
    /* stylelint-disable-next-line declaration-no-important */
    text-align: center !important;
  }

  /* stylelint-disable selector-max-type */
  &::ng-deep button {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--spacing-4) !important;
  }
}

tg-user-card {
  &::ng-deep .user-card:not(.disabled) {
    grid-template-columns: 32px minmax(0, auto);
  }

  &::ng-deep .user-identifier {
    max-inline-size: 395px;

    &.disabled {
      max-inline-size: 230px;
      min-inline-size: 230px;
    }
  }
}

.disabled-badge {
  &::ng-deep {
    background: var(--color-gray10);
    border-radius: 3px;
    color: var(--color-gray100);
    padding: var(--spacing-4);
    text-transform: initial;
  }
}
